<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>更换皮肤</title>
		<style>
			body{
				background: url(img/1.jpg);
			}
			.div{
				text-align: center;
				margin: 50px auto;
				width: 1200;
				height: 500px;
				
				//设置一定的透明度
				background: rgb(255,255,255,0.3);
			}
			div img{
				margin: 20px 20px 0 20px;
				float: left;
				width: 200px;
				height: 150px;
			}
		</style>
		
	</head>
	<body>
		<div class="div">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
		</div>
		<script>
			var div = document.getElementsByTagName("div")[0];
			var body = document.body;
			var imgArr = div.children;
			for(var i = 0; i <imgArr.length; i++){
				imgArr[i].index = i;
				imgArr[i].onclick = function(){
					body.style.backgroundImage = "url(img/" + (this.index + 1) + ".jpg)";
					
				}
			}
		</script>
	</body>
</html>
